import { useEffect } from "react"
import * as THREE from 'three'
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
import Stats from "three/examples/jsm/libs/stats.module.js";
import createLine from './Line';
import createPoint from './Point';
import createMash from "./Mash";
/*
 * @Author: Leo.wang wanglizhigs@163.com
 * @Date: 2023-10-19 11:35:36
 * @LastEditors: Leo.wang wanglizhigs@163.com
 * @LastEditTime: 2023-10-26 15:59:37
 * @FilePath: /three-react/src/pages/Base.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */

const width = window.innerWidth - 200;
const height = window.innerHeight

function createRender(width, height) {

  // 创建场景
  const scene = new THREE.Scene();
  // 创建相机
  const camera = new THREE.PerspectiveCamera(60, width / height, 1, 1400);
  camera.position.set(0, 0, 400);
  camera.lookAt(0, 0, 0);
  // 创建webgl渲染器
  const renderer = new THREE.WebGLRenderer();
  // 设置渲染器窗口大小
  renderer.setSize(width, height);
  document.getElementById("container")?.appendChild(renderer.domElement);


  // scene.add(createLine());
  // scene.add(createPoint());
  // scene.add(createMash());

  const x = 50;
  const material = new THREE.MeshLambertMaterial({
    color: 0x00ff00,
    wireframe:true,
  })

  const box = new THREE.BoxGeometry(20,20,20);
  box.scale(2,2,2)
  const boxMash = new THREE.Mesh(box, material);
  boxMash.position.set(x*0, 0, 0);

  const euler = new THREE.Euler( Math.PI/4,0, Math.PI/3)
  console.log('euler', euler)
  boxMash.rotation.set(euler.x, euler.y, euler.z);
  scene.add(boxMash);


  const box1 = new THREE.BoxGeometry(20,20,20);
  box1.scale(2,2,2)
  const box1Mash = new THREE.Mesh(box1, material);
  box1Mash.position.set(0, 50*1, 0);
  console.log('box1Mash', box1Mash)
  const axis = new THREE.Vector3(0,1,0);//向量axis
  box1Mash.rotateOnAxis(axis, Math.PI/8)
  scene.add(box1Mash);

  const box2 = new THREE.BoxGeometry(20,20,20);
  box2.scale(2,2,2)
  box2.translate(100,0,100)
  const box2Mash = new THREE.Mesh(box2, material);
  box2Mash.position.set(0, 50*2, 0);
  scene.add(box2Mash);

  const box3 = new THREE.BoxGeometry(20,20,20);
  box3.scale(2,2,2)
  box3.rotateX(45)
  const box3Mash = new THREE.Mesh(box3, material);
  box3Mash.position.set(0, 50*3, 0);
  scene.add(box3Mash);

  const cylinder = new THREE.CylinderGeometry(10,10,50);
  const cylinderMash = new THREE.Mesh(cylinder, material);
  cylinderMash.position.set(x*1, 0, 0);
  scene.add(cylinderMash);

  const shpere = new THREE.SphereGeometry(20);
  const shpereMash = new THREE.Mesh(shpere, material);
  shpereMash.position.set(x*2, 0, 0);
  scene.add(shpereMash);

  const cone = new THREE.ConeGeometry(10,20)
  const coneMash = new THREE.Mesh(cone, material);
  coneMash.position.set(x*3, 0, 0);
  scene.add(coneMash);

  const plane = new THREE.PlaneGeometry(10,20)
  const planeMash = new THREE.Mesh(plane, material);
  planeMash.position.set(x*4, 0, 0);
  scene.add(planeMash);


  const circle = new THREE.CircleGeometry(10)
  const circleMash = new THREE.Mesh(circle, material);
  circleMash.position.set(x*5, 0, 0);
  scene.add(circleMash);


  const axesHelper = new THREE.AxesHelper(200);
  scene.add(axesHelper)

  // 环境光
  const ambient = new THREE.AmbientLight(0xffffff, 0.4);
  scene.add(ambient);

  const stats = new Stats();
  document.getElementById("container")?.appendChild(stats.domElement);

  // 轨道控制器
  const controls = new OrbitControls(camera, renderer.domElement);
  controls.addEventListener('change', function () {

  })

  function animate() {
    requestAnimationFrame(animate)
    // 渲染场景
    renderer.render(scene, camera);
    stats.update();
  }
  animate();
  return renderer
}
export default function GeometryDemo() {
  useEffect(() => {
    if (!window.isMounted) {
      createRender(width, height);
      window.isMounted = true;
    }
  }, [])
  return (
    <div id="container"></div>
  )
}